<template>
  <view class="content">
    <view class="form">
      <view class="name">
        <view class="label">餐桌桌号：</view>
        <input type="number" v-model="data.markNo" placeholder="请输入餐桌桌号" bindinput="money" />
      </view>
      <view class="name">
        <view class="label">餐桌名称：</view>
        <input type="text" v-model="data.name" placeholder="请输入餐桌名称" bindinput="jifen" />
      </view>
      <view class="btn">
        <button @click="post" v-if="data.id === ''">创建</button>
        <button @click="put" v-else>修改</button>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { err, back, toast } from '@/utils/uniapi';
import { api } from '@/api/mop_api';
const data = reactive({
  markNo: '',
  name: '',
  id: ''
});
onLoad(async (options) => {
  if (options.id) {
    const { id } = options;
    data.id = id;
    try {
      const res = await api.board_get({ id });
      if (res.respCode === 200) {
        const item = JSON.parse(res.source);
        (data.markNo = item.markNo), (data.name = item.name);
      } else {
        toast(res.msg);
      }
    } catch (error) {
      err(error);
      throw error;
    }
  }
});
async function post() {
  const { markNo, name } = data;
  try {
    const res = await api.board_post({ markNo, name });
    if (res.respCode === 200) {
      toast('创建成功');
      back();
    } else {
      toast(res.msg);
    }
  } catch (error) {
    err(error);
    throw error;
  }
}
async function put() {
  const { markNo, name, id } = data;
  try {
    const res = await api.board_put({ markNo, name, id });
    if (res.respCode === 200) {
      toast('修改成功');
      back();
    } else {
      toast(res.msg);
    }
  } catch (error) {
    err(error);
    throw error;
  }
}
</script>

<style scoped>
.form {
  width: 100%;
  margin: 20rpx auto;
  background: #fff;
  padding: 20rpx;
  box-sizing: border-box;
}
.name {
  width: 100%;
  margin: 0 auto;
  font-size: 30rpx;
  overflow: hidden;
  line-height: 60rpx;
  margin-bottom: 20rpx;
}
.label {
  float: left;
  margin-right: 20rpx;
  margin-left: 18rpx;
}
input {
  float: left;
  width: 462rpx;
  height: 52rpx;
  border-radius: 12rpx 12rpx 12rpx 12rpx;
  opacity: 1;
  border: 2rpx solid #e5e7eb;
  padding-left: 20rpx;
  border-radius: 20rpx;
}
.pl {
  line-height: 60rpx;
}
button {
  width: 716rpx;
  height: 68rpx;
  background: #e30514;
  border-radius: 12rpx 12rpx 12rpx 12rpx;
  padding: 0;
  color: #fff;
  line-height: 68rpx;
}
</style>
